<template>
    <div>
        <el-form :model="counter" ref="counterForm" label-width="130px" @submit.native.prevent="submit('counterForm')">
            <el-form-item label="厂商名" prop="name" :rules="{required: true, message: '请输入厂商名', trigger:'blur'}">
                <el-input v-model.trim="counter.name" placeholder="请输入厂商名" clearable></el-input>
            </el-form-item>
            <el-form-item
                label="厂编"
                prop="no"
                :rules="[
                    {required: true, message: '请输入厂编', trigger:'blur'},
                    {type: 'integer', min: 1, message: '厂编必须为数字', trigger:'blur'}
                ]"
            >
                <el-input v-model.number="counter.no" placeholder="请输入厂编" clearable></el-input>
            </el-form-item>
            <el-form-item label="进场日期" prop="begin" :rules="{required: true, message: '请输入进场日期', trigger:'blur'}" v-if="role === 'AD'">
                <el-date-picker type="date" v-model="counter.begin" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="请选择早班日期"></el-date-picker>
            </el-form-item>
            <el-form-item
                label="租用期限(月)"
                prop="month"
                :rules="[
                    {required: true, message: '请输入租用期限', trigger:'blur'},
                    {type: 'integer', min: 1, max: 120, message: '租用期限必须为 1 至 120 之间的数字', trigger:'blur'}
                ]"
                v-if="role === 'AD'"
            >
                <el-input-number v-model="counter.month" controls-position="right" placeholder="请输入租用期限" :min="1" :max="120"></el-input-number>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" native-type="submit">提交</el-button>
                <el-button @click="$router.push({ name:'counterList' })">返回</el-button>
            </el-form-item>
            <el-table
                v-if="role === 'EDP' && this.id && this.counter.status === 2"
                :data="deviceList"
                ref="singleTable"
                highlight-current-row
                @current-change="row => counter.device_id = row.id"
                border
                style="width: 100%; margin-top: 15px"
                :default-sort="{prop: 'name', order: 'ascending'}"
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
            >
                <el-table-column label width="35">
                    <template slot-scope="scope">
                        <el-radio v-model="counter.device_id" :label="scope.row.id">{{''}}</el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="serial" label="序列号" sortable></el-table-column>
                <el-table-column prop="model" label="型号" sortable></el-table-column>
                <el-table-column prop="name" label="设备名" sortable></el-table-column>
                <el-table-column prop="remark" label="备注" sortable></el-table-column>
            </el-table>
        </el-form>
    </div>
</template>

<script>
export default {
    props: {
        id: null
    },
    data() {
        return {
            loading: false,
            counter: {
                name: null,
                no: null,
                begin: new Date(),
                month: 1,
                device_id: null
            },
            deviceList: []
        }
    },
    computed: {
        role() {
            return this.$store.getters.user.role
        }
    },
    methods: {
        async fetch() {
            this.loading = true
            const res = await this.$http.get(`/counter/${this.id}`)
            if (res && res.code === 0) {
                this.counter = res.returnObject
            }
            if (this.role === 'EDP') {
                if (this.counter.status === 2) {
                    this.deviceList.push(this.counter.Device)
                    this.$nextTick(() => {
                        this.$refs.singleTable.setCurrentRow(this.deviceList[0])
                    })
                }
                const res2 = await this.$http.get('/deviceListFree')
                if (res2 && res2.code === 0) {
                    this.deviceList = this.deviceList.concat(res2.returnObject)
                }
            }
            this.loading = false
        },
        reset(formName) {
            this.$refs[formName].resetFields()
        },
        submit(formName) {
            this.$refs[formName].validate(async valid => {
                if (!valid) return false
                if (this.id) {
                    const res = await this.$http.put(`/counter/${this.id}`, this.counter)
                    if (res && res.code === 0) {
                        this.$message.success('保存成功')
                        this.$router.push('/counterList')
                    }
                } else {
                    const res = await this.$http.post('/counter', this.counter)
                    if (res && res.code === 0) {
                        this.$message.success('保存成功')
                        this.$router.push('/counterList')
                    }
                }
            })
        }
    },
    mounted() {
        this.id && this.fetch()
    }
}
</script>

<style scoped>
</style>
